/**
 * 文本列表移入移出组件
 * @author SPY
 * @description 用于文本移入移出时,解决文本样式、点击处理事件问题
 * @date 2019/11/30
 */

import React from 'react';
import PropTypes from 'prop-types';

class OnMouseText extends React.Component {

    static propTypes = {
        data: PropTypes.array,   // 要显示的一位数组列表
        mouseLeaveStyle: PropTypes.object,  // 鼠标移开之后的样式
        mouseEnterStyle: PropTypes.object,  // 鼠标移入的样式
        onClick:PropTypes.func,  // 鼠标点击函数
    }

    static defaultProps = {
        data: ['名称一', '名称二', '名称三', '名称四', '名称五'],
        mouseLeaveStyle: { marginRight: 20, cursor: 'pointer' },
        mouseEnterStyle: { marginRight: 20, cursor: 'pointer', color: 'red' },
    }

    state = {
        key: null,  // 数组的值对应的下标
    }

    /**
     * 鼠标移开函数
     * @param {string} value -- 选中的下标值
     */
    onMouseLeave = (value) => {
        this.setState({ key: null });
    }

    /**
     * 鼠标移入函数
     * @param {string} value -- 选中的下标值
     */
    onMouseEnter = (value) => {
        this.setState({ key: value });
    }

    /**
     * 鼠标点击函数
     * @param {string} title -- 选中的名称
     * @param {string} value -- 选中的下标值
     */
    onClick=(title,value)=>{
        const {onClick} = this.props;
        if(typeof onClick === 'function'){
            onClick(title,value);
        }
    }

    render() {
        const { key } = this.state;
        const { data, mouseEnterStyle, mouseLeaveStyle } = this.props;
        return (
            <>
                {
                    data.map((item, index) => {
                        return (
                            <span
                                key={index}
                                style={key === index ? mouseEnterStyle : mouseLeaveStyle}
                                onMouseEnter={() => this.onMouseEnter(index)}
                                onMouseLeave={() => this.onMouseLeave(index)}
                                onClick={()=>this.onClick(item,index)}
                            >
                                {item}
                            </span>
                        )
                    })
                }
            </>
        );
    }
}

export default OnMouseText;